<script setup>
import { useDeviceMotion } from "@vueuse/core";
import { useElementByPoint, useMouse } from "@vueuse/core";
import { useMouseInElement } from "@vueuse/core";

import { effect, reactive, ref } from "vue";
import { onClickOutside } from "@vueuse/core";
import { useDevicePixelRatio, useParentElement } from "@vueuse/core";
import { usePageLeave } from "@vueuse/core";
const isLeft = usePageLeave();
import { createSharedComposable } from "@vueuse/core";

const useSharedMouse = createSharedComposable(useMouse);

// CompA.vue
const { x1, y1 } = useSharedMouse();
const { x2, y2 } = useSharedMouse();

const parentEl = useParentElement();
const { x, y, sourceType } = useMouse({ type: "client" });
const { element } = useElementByPoint({ x, y });

const { pixelRatio } = useDevicePixelRatio();

const target = ref(null);
list.forEach((element) => {
  console.log(element);
});

const { elementX, elementY, isOutside } = useMouseInElement(target);

defineProps({
  msg: String,
});
</script>

<template>
  <div>鼠标是否离开: {{ isLeft }}</div>
  <img
    :style="{ left: x + 'px', top: y + 'px' }"
    src="https://img.51miz.com/Element/00/82/32/83/d169346e_E823283_66e3d17b.png"
    alt=""
  />
  <div>pixelRatio:{{ pixelRatio }} 坐标轴: {{ x }} --- {{ y }}</div>
  <div>坐标轴1: {{ x1 }} --- {{ y1 }}</div>
  <div>坐标轴2: {{ x2 }} --- {{ y2 }}</div>
  <div ref="target" style="width: 200px; height: 200px; background: gray">
    elX: {{ elementX }} elY: {{ elementY }} 鼠标是否离开: {{ isOutside }}
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

img {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
}
</style>
